<template>
  <!-- 计划成本-税费抵扣 -->
  <div class="taxesAndFees blue-border">
    <div class="top">
      <div>
        <div><span>平均税赋率</span><span class="strong">5%</span></div>
        <div><span>全年缴税金额</span><span class="strong">531,935.84</span></div>
      </div>
      <mixChart ref="taxesAndFeesLineChart"></mixChart>
    </div>
    <div class="bottom">
      <div class="title">税费表</div>
      <tableBox :data="taxesAndFeesData" :show-serial-number="false" :showThead="true" :thead-list="taxesAndFeesThead">
      </tableBox>
    </div>
  </div>
</template>
<script>
import mixChart from './mixChart'
import tableBox from "./table-box.vue";

export default {
  components: { mixChart, tableBox },
  data() {
    return {
      taxesAndFeesThead: ['科目', '参考值', '计划值', '实际值', '参考差异', '计划差异'],
      taxesAndFeesData: [
        [{ val: '税率' }, { val: '5%' }, { val: '4.2%' }, { val: '4.75%' }, { val: '-0.25%', style: "color:#FF0000" }, { val: '0.55%' },],
        [{ val: '销项金额' }, { val: '5%' }, { val: '4.2%' }, { val: '4.75%' }, { val: '-0.25%', style: "color:#FF0000" }, { val: '0.55%' },],
        [{ val: '销项税额' }, { val: '5%' }, { val: '4.2%' }, { val: '4.75%' }, { val: '-0.25%', style: "color:#FF0000" }, { val: '0.55%' },],
        [{ val: '价税合计' }, { val: '5%' }, { val: '4.2%' }, { val: '4.75%' }, { val: '-0.25%', style: "color:#FF0000" }, { val: '0.55%' },],
        [{ val: '进项金额' }, { val: '5%' }, { val: '4.2%' }, { val: '4.75%' }, { val: '-0.25%', style: "color:#FF0000" }, { val: '0.55%' },],
        [{ val: '进项税额' }, { val: '5%' }, { val: '4.2%' }, { val: '4.75%' }, { val: '-0.25%', style: "color:#FF0000" }, { val: '0.55%' },],
        [{ val: '税价合计' }, { val: '5%' }, { val: '4.2%' }, { val: '4.75%' }, { val: '-0.25%', style: "color:#FF0000" }, { val: '0.55%' },],
        [{ val: '应缴税额' }, { val: '5%' }, { val: '4.2%' }, { val: '4.75%' }, { val: '-0.25%', style: "color:#FF0000" }, { val: '0.55%' },],
      ]
    }

  },
  mounted() {
    this.getTaxRate()
  },
  methods: {
    getTaxRate() {
      let xAxis = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']
      let dataAV = [100, 200, 300, 400, 500, 600, 700, 800, 900, 1000, 1100, 1200]
      let dataRV = [600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600, 600]
      let dataPV = [800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800, 800]
      let chartData = { xAxis, dataAV, dataRV, dataPV }
      this.$refs.taxesAndFeesLineChart.initChart(chartData)
    }
  }
}
</script>
<style lang="scss" scoped>
@import 'border.css';

.taxesAndFees {
  width: 100%;
  height: 100%;
  padding: 25px 21px;
  display: flex;
  flex-direction: column;

  .title {
    font-weight: bold;
    font-size: 20px;
    color: #000000;
    text-align: center;
    margin: 0 0 20px;

  }

  .top {
    height: 38%;
    display: flex;
    margin-bottom: 2%;

    >div:nth-child(1) {
      width: 20%;
      height: 80%;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 10px;
      color: #333333;
      font-size: 14px;

      >div {
        background: #FFFFFF;
        border-radius: 8px 8px 8px 8px;
        // margin-bottom: 26px;
        padding: 24px;
        display: flex;
        flex-direction: column;
        line-height: 36px;

        .strong {
          font-weight: bold;
          font-size: 16px;
        }


      }

    }

    >div:nth-child(2) {
      flex-grow: 1;
    }
  }

  .bottom {
    flex-grow: 1;
    height: 55%;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
    padding-top: 32px;
    border-top: 1px solid #ddd;

    >div:nth-child(2) {
      flex-grow: 1;
    }
  }
}
</style>